<template>
  <div :class="$style.main" @click="onClick">
    <!-- {{ text }} -->
    <InoKeyboardDiagram :data="data" level-key="levelType" :level-config="levelConfig">
      <template #default="{ item, textColor }">
        <div class="wh-full flx-center common-text-size p-5px border-box" :title="item.name">
          <span class="mle">{{ item.name }}</span>
        </div>
      </template>
    </InoKeyboardDiagram>
    <InoTreeSelect :options="data"></InoTreeSelect>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, ref } from 'vue'
import { useMethods } from './utils'
import '@ino/theme-chalk/src/common/var.css.js'
import '@ino/theme-chalk/src/common/index.scss'
import '@ino/theme-chalk/src/comp/index.js'
import { InoKeyboardDiagram } from '@ino/components/keyboardDiagram/index'
import '@ino/components/keyboardDiagram/style/index'
import { InoTreeSelect } from '@ino/components/treeSelect/index'
import '@ino/components/treeSelect/style/index'

const props = withDefaults(
  defineProps<{
    value?: string
    text?: string
  }>(),
  {
    text: '斤斤计较'
  }
)

// 暴露事件，事件名称小写，编辑态中定义的事件名是以on拼接此处的事件名称按驼峰结构生成
const emits = defineEmits<{
  click: [data: string]
}>()

const onClick = () => {
  emits('click', props.text)
}

const levelConfig = {
  L1: { name: 'L1', color: '#0099f2', icon: 'flow', index: 1, textColor: '#fff' },
  L2: { name: 'L2', color: '#4c64ff', icon: 'flow', index: 2, textColor: '#fff' },
  L3: { name: 'L3', color: '#c8cfff', icon: 'flow', index: 3 },
  L4: { name: 'L4', color: '#d9c3ff', icon: 'flow', index: 4 },
  L5: { name: 'L5', color: '#c2e7fc', icon: 'flow', index: 5 }
}

const data = ref([
  {
    name: 'AAA',
    code: 'AAA',
    id: 'aaaa',
    levelType: 'L1',
    children: [
      {
        name: 'AAA-1',
        code: 'AAA-1',
        id: 'aaaa-1',
        levelType: 'L2'
      },
      {
        name: 'AAA-2',
        code: 'AAA-2',
        id: 'aaaa-2',
        levelType: 'L2'
      }
    ]
  }
])

// 定义组件方法
useMethods(props, {
  /** 该方法为编辑态定义的组件方法名 */
  setText: () => {
    console.log('1111111')
  }
})
</script>

<style lang="scss" module>
.main {
  min-height: 50px;
  // color: red;
}
</style>
